<?xml version='1.0' encoding='UTF-8' ?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"
      xmlns:ui="http://xmlns.jcp.org/jsf/facelets"
      xmlns:h="http://xmlns.jcp.org/jsf/html"
      xmlns:f="http://xmlns.jcp.org/jsf/core"
      xmlns:p="http://xmlns.jcp.org/jsf/passthrough">
    <h:body>
        <ui:composition template="./Templates/TemplateInterno.xhtml">
            <ui:define name="topoInterno"></ui:define>    
            
<ui:define name="content">
        <!--  ###################################################-->
        <br/>
        <br/>
        <br/>
        <h:panelGroup layout="block" class="container">
            <h:panelGroup layout="block" class="row">
                <h:panelGroup layout="block" class="col-md-1"></h:panelGroup>
                <h:panelGroup layout="block" class="col-md-9">
                    <h:panelGroup layout="block" class="panel panel-default"> 
                        <h:panelGroup layout="block" class="panel-body">
                            <h:panelGroup layout="block" class="page-header">
                                    <h3>Relatórios</h3>
                                    <h:commandButton value="Filtros" styleClass="btn btn-success btn-min">
                                        <f:passThroughAttribute name="data-toggle" value="collapse" />
                                        <f:passThroughAttribute name="data-target" value="#demo" />
                                    </h:commandButton> <br/><br/>
                                <h:panelGrid columns="5" id="demo" class="collapse">
                                    <h:panelGroup layout="block" class="form-group">
                                        <h:panelGroup layout="block" class="input-group">
                                            <span class="input-group-addon"><span class="glyphicon glyphicon-th-list"></span></span>
                                            <h:selectOneMenu value="#{movimentacaoMB.idCategoria}" style="width:200px;height:30px;border-radius:3px;">
                                                <f:selectItems value="#{categoriaMB.listaCategoria}"/>   							
                                            </h:selectOneMenu>&nbsp;&nbsp;
                                        </h:panelGroup>
                                    </h:panelGroup>   
                                    <h:panelGroup layout="block" class="form-group">
                                        <h:panelGroup layout="block" class="input-group">
                                            <span class="input-group-addon"><span class="glyphicon glyphicon-th-list"></span></span>
                                            <h:selectOneMenu value="#{movimentacaoMB.idConta}" style="width:200px;height:33px;border-radius:3px;">
                                                    <f:selectItems value="#{contaMB.listaContaCombo}"/>   							
                                                </h:selectOneMenu>
                                                </h:panelGroup>
                                    </h:panelGroup> &nbsp;&nbsp;
                                    <h:panelGroup layout="block" class="form-group">
                                        <h:commandButton value="Buscar" class="btn btn-success " type="submit">
                                            <f:ajax event="click" listener="#{movimentacaoMB.relatorio}" execute="@all"/>
                                        </h:commandButton>
                                    </h:panelGroup>
                                </h:panelGrid>
                            </h:panelGroup>
                            <center>
                                <h:form>
                                    <h:dataTable value="#{movimentacaoMB.relatorio()}" var ="mov" class="table table-striped table-hover table-responsive">
                                        <h:column>
                                            <f:facet name="header">Descrição</f:facet>
                                            #{mov.descricao}
                                        </h:column>
                                        <h:column>
                                            <f:facet name="header">Valor</f:facet>
                                            #{mov.valor}
                                        </h:column>
                                         <h:column>
                                            <f:facet name="header">Conta</f:facet>
                                            #{mov.idConta.nome}
                                        </h:column>
                                        <h:column>
                                            <f:facet name="header">Categoria</f:facet>
                                            #{mov.idCategoria.nome}
                                        </h:column>
                                        <h:column>
                                            <f:facet name="header">Lançamento</f:facet>
                                            #{mov.dataM}
                                        </h:column>
                                        <h:column>
                                            <f:facet name="header">Tipo</f:facet>
                                            #{mov.idTipoMovimentacao.descricao}
                                        </h:column>
                                    </h:dataTable>
                                </h:form>    
                            </center>    
                        </h:panelGroup>   
                    </h:panelGroup>    
                </h:panelGroup>    
            </h:panelGroup>
        </h:panelGroup> 
         <h:panelGroup layout="block" class="container">
            <h:panelGroup layout="block" class="row">
                <h:panelGroup layout="block" class="col-md-1"></h:panelGroup>
                <h:panelGroup layout="block" class="col-md-9">
                    <h:panelGroup layout="block" class="panel panel-default"> 
                        <h:panelGroup layout="block" class="panel-body">
                            <h:panelGroup layout="block" class="page-header">
                                <h3>Gráficos de Movimentações</h3>
                            </h:panelGroup>
                            <h:panelGroup layout="block" id="piechart" style="width: 900px; height: 500px;"></h:panelGroup>
                        </h:panelGroup>   
                    </h:panelGroup>    
                </h:panelGroup>    
            </h:panelGroup>
        </h:panelGroup> 
    </ui:define>            
            <ui:define name="rodape"></ui:define>
        </ui:composition>
    </h:body>
</html>
